<template>
    <li @mouseenter="enterLi" @mouseleave="leaveLi">
        <label>
            <input type="checkbox" v-model="todo.isCompleted">
            <span>{{ todo.title }}</span>
        </label>
        <button class="btn btn-danger" v-show="isShow" @click="delTodo">删除</button>
    </li>
</template>
  
<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { ITodo } from '@/types/todo'

export default defineComponent({
    name: 'Item',
    props: {
        todo: {
            type: Object as () => ITodo,
            required: true
        },
        index: {
            type: Number,
            required: true
        },
        deleteTodo: {
            type: Function,
            required: true
        },
    },

    setup(props) {
        // 设置删除按钮默认不显示
        let isShow = ref(false)

        const enterLi = () => {
            isShow.value = true
        }

        const leaveLi = () => {
            isShow.value = false
        }

        // const isComplete = computed({
        //     get() {
        //         return props.todo.isCompleted
        //     },
        //     set(val) {
        //         props.updateTodo(props.todo, val)
        //     }
        // })

        // 删除数据的方法
        const delTodo = () => {
            if(confirm('确认要删除吗？')) {
                props.deleteTodo(props.index)
            }
        }

        return {
            isShow,
            enterLi,
            leaveLi,
            delTodo,
        }
    }

})

</script>

<style scoped lang="scss">
li {
    list-style: none;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
    &:hover {
        color: green;
        background-color: lightskyblue;
    }

    label {
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    button {
        margin-left: auto;
        cursor: pointer;
        &:hover {
            color: lightcoral;
        }
    }

    &::before{
        content: initial;
    }

    &:last-child {
        border-bottom: none;
    }
}
</style>